/*
 * Copyright (c) 2023 Huawei Technologies Co.,Ltd.
 *
 * openInula is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 *
 *          http://license.coscl.org.cn/MulanPSL2
 *
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 */

import Inula, { useState } from "openinula";
import Echarts from "inula-echarts";

function App() {
  const style = {
    width: "500px",
    height: "500px",
  };

  const [option, setOption] = useState({
    title: {
      text: "inula-echarts",
      left: "center",
      top: "bottom",
      textStyle: {
        fontSize: 22,
        color: "#fff",
      },
    },
    series: [
      {
        name: "Nightingale Chart",
        type: "pie",
        radius: [35, 230],
        center: ["50%", "50%"],
        roseType: "radius",
        padAngle: 5,
        itemStyle: {
          borderRadius: 15,
        },
        label: {
          show: false,
        },
        emphasis: {
          label: {
            show: true,
          },
        },
        data: [
          { value: 30, name: "rose 1" },
          { value: 27, name: "rose 2" },
          { value: 24, name: "rose 3" },
          { value: 21, name: "rose 4" },
          { value: 18, name: "rose 5" },
          { value: 15, name: "rose 6" },
          { value: 12, name: "rose 7" },
          { value: 10, name: "rose 8" },
        ],
      },
    ],
  });

  return (
    <div>
      <Echarts style={style} option={option} />
    </div>
  );
}

Inula.render(<App />, document.getElementById("root"));
